<template>
    <!--课程设置-->
    <div>
        <Tabs :value="code" @on-click="change">
            <TabPane v-for="item in tabList" :label="item.name" :key="item.name" :name="item.code">
                <div class="options">
                    <div class="add">
                        <Button class="title-option" type="success" @click="add(item)">添加</Button>
                        <Button class="title-option" v-if="selectIds.length==0" disabled="">删除</Button>
                        <Button class="title-option" type="error" v-else @click="remove">删除</Button>
                    </div>
                </div>
                <Table :columns="columns" :data="data" border stripe tooltip-theme="light"
                       @on-selection-change="changeSelect">
                    <template slot-scope="{row}" slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row,item)">编辑
                        </Button>
                    </template>
                </Table>
            </TabPane>
        </Tabs>
        <course-setting-form :modal="modal" :modify="modify"></course-setting-form>
    </div>
</template>

<script>
    import CourseSettingForm from './CourseSettingForm';

    export default {
        name: "CourseSetting",
        components: {
            CourseSettingForm
        },
        data() {
            return {
                code: 'grade',
                modal: false,
                selectIds: [],
                modify: '',
                tabList: [
                    {
                        name: '年级设置',
                        code: 'grade'
                    },
                    {
                        name: '班级类型设置',
                        code: 'feather'
                    },
                    {
                        name: '教室设置',
                        code: 'room'
                    },
                ],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        type: 'index',
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name'
                    }, {
                        title: '备注',
                        key: 'remark'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: "center"
                    }
                ],
                data: []
            }
        },
        created() {
            this.getList();
        },
        methods: {
            //批量选择行时
            changeSelect(e) {
                this.selectIds = [];
                e.forEach(
                    item => this.selectIds.push(item.id)
                );
            },
            //标签选型改变时
            change(name) {
                this.code = name;
                this.getList();
            },
            //获取列表
            getList() {
                //首先将数据置空，以免网络链接失败时出现脏数据
                this.date = [];
                this.$api.dictionaryByCode(this.code).then(res => {
                    this.data = res;
                })
            },
            //添加
            add(item) {
                this.modal = true;
                this.modify = {
                    title: item.name,
                    option: '添加',
                    parentCode: this.code
                }
            },
            //编辑
            edit(row, item) {
                console.log("edit", item);
                this.modal = true
                //深拷贝，防止table行数据跟着改变
                let _row = JSON.stringify(row);
                this.modify = JSON.parse(_row);
                this.modify.title = item.name;
                this.modify.option = "修改";
            },
            //删除
            remove() {
                this.$Modal.confirm({
                    title: '确认删除',
                    onOk: () => {
                        this.$api.dictionaryRemoveByIds(this.selectIds)
                            .then(() => {
                                this.$Message.success('删除成功')
                                this.getList();
                                this.selectIds = [];
                            })
                    }
                })
            },
            //关闭编辑框
            cancel() {
                this.modal = false;
                this.getList();
            },
        }

    }
</script>

<style scoped>
    .title-option {
        display: inline-block;
        margin-left: 10px;
    }
</style>
